<template>
	<view class="">
		<uv-sticky bgColor="#fff">
			<uv-tabs :scrollable='false' :list="tabList" @click="cilck"></uv-tabs>
		</uv-sticky>
		<view class="p-4">
			<view class="p-4 bg-white rounded-3 box-shadow mb-4" v-for="(item,index) in list" :key="index">
				<view class="flex flex-row flex-y-center flex-x-space-between mb-5">
					<view class="w-80 h9 flex flex-row flex-y-center">
						<image class="avatar" :src='item.user.avatar'></image>
						<view>{{item.user.nickname}}</view>
					</view>
					<view class="h9 text-primary-dark-2 font-weight-700">￥{{item.order.price}}</view>
				</view>
				<view class="line mb-3"></view>
				<view class="p-3">
					<view class='flex flex-row flex-y-center mb-2'>
						<view class="text-dark-light-3 h9 w-20">订单编号:</view>
						<view class="h9 text-dark-light-1">{{item.order.order_no}}</view>
					</view>
					<view class='flex flex-row flex-y-center mb-2'>
						<view class="text-dark-light-3 h9 w-20">分销佣金:</view>
						<view class="h9 text-primary-dark-2 font-weight-600" v-if='USERINFO.id==item.first_id'>￥{{item.first_money}}</view>
						<view class="h9 text-primary-dark-2 font-weight-600" v-if='USERINFO.id==item.second_id'>￥{{item.second_money}}</view>
						<view class="h9 text-primary-dark-2 font-weight-600" v-if='USERINFO.id==item.third_id'>￥{{item.third_money}}</view>
					</view>
					<view class='flex flex-row flex-y-center mb-2'>
						<view class="text-dark-light-3 h9 w-20">订单时间:</view>
						<view class="h9 text-dark-light-1">{{item.create_at}}</view>
					</view>
				</view>
			</view>
		</view>
		<uni-load-more color="#007AFF" :status="status" />
	</view>
</template>

<script setup lang="ts">
	import { ref } from 'vue'
	import { onLoad,onReachBottom } from '@dcloudio/uni-app'
	import { useUserStore, useRefs } from "@/stores/index";
	import { $http } from '@/utils/index'
	
	const userStore = useUserStore()
	const { USERINFO } = useRefs(userStore);
	const tabList = ref([
		{ 'name': '全部', 'type': "0" },
		{ 'name': '未结算', 'type': "1" },
		{ 'name': '已结算', 'type': "2" },
	])
	const list = ref([])
	const total = ref(0)
	const status = ref('loadMore')
	const queryForm = ref({
		page: 1,
		limit: 10,
		type: "0"
	})

	onLoad(() => {
		getList()
	})
	const getList = (() => {
		status.value='loading'
		$http.get('Dealer/getOrder', { data: queryForm.value }).then((res) => {
			total.value = res.data.total
			let data = res.data.data
			list.value.push.apply(list.value, data)
			if (list.value.length >= total.value) {
				status.value = 'noMore'
			}else{
				status.value='more'
			}
		})
	})
	const cilck = ((e:any) => {
        queryForm.value.page = 1
		queryForm.value.type = e.type
		list.value.length = 0
		getList()
	})
	
	//页面触底
	onReachBottom(() => {
		status.value = 'loading'
		queryForm.value.page++
		getList()
	})
</script>

<style>
	.avatar {
		width: 60rpx;
		height: 60rpx;
	}

	.line {
		background-color: #d9d9d9;
		height: 1px;
		width: 100%;
	}
</style>